<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_商品列表练习</title>
</head>
<body>
<table border="1">
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
    </tr>
</table>
<script>
    const arr = [
        {title: "小米手机", price: 5000, num: 100}
        , {title: "华为手机", price: 6000, num: 200}
        , {title: "苹果手机", price: 8000, num: 300}
        , {title: "OPPO手机", price: 4000, num: 400}
        , {title: "VIVO手机", price: 3000, num: 500}
        , {title: "三星手机", price: 2000, num: 600}
        , {title: "魅族手机", price: 1000, num: 700}
        , {title: "一加手机", price: 5000, num: 800}
    ];
    for (let i = 0; i < arr.length; i++) {
        const item = arr[i];
        const trE = document.createElement("tr");
        const titleTd = document.createElement("td");
        const priceTd = document.createElement("td");
        const numTd = document.createElement("td");

        titleTd.innerHTML = item.title;
        priceTd.innerHTML = item.price;
        numTd.innerHTML = item.num;
        trE.append(titleTd, priceTd, numTd);
        document.querySelector("table").append(trE);
    }
</script>
</body>
</html>